<template>
  <el-tooltip :placement="placement">
    <div slot="content"
         class="contentSty">
      签收信息
      <div>发货数量：{{ quantity }}</div>
      <div>实签数量：{{ signQuantity }}</div>
      <div>异常数量：{{ exceptionQuantity }}</div>
      <div v-if="exceptionQuantity">
        异常分类：<span v-if="lackQuantity">缺少:{{ lackQuantity }};</span>
        <span v-if="loseQuantity">丢失:{{ loseQuantity }};</span>
        <span v-if="damageQuantity">破损:{{ damageQuantity }};</span>
        <span v-if="otherQuantity">其他:{{ otherQuantity }};</span>
      </div>
      <div v-if="exceptionDesc">异常描述：{{ exceptionDesc }}</div>
      <div v-if="rejects.length"
           style="margin-top: 10px;">
        <div>签收拒签信息</div>
        <template v-for="(item,key) in rejects ">
          <div :key="key">
            拒签信息{{key+1}}: 箱号{{item.boxNo}},拒签数量{{item.quantity}},拒签原因:{{item.reason}}
          </div>
        </template>
      </div>
      <div v-if="receiptRejects.length"
           style="margin-top: 10px;">
        <div>回单复核拒签信息</div>
        <template v-for="(item,key) in receiptRejects ">
          <div :key="key">
            拒签信息{{key+1}}: 箱号{{item.boxNo}},拒签数量{{item.quantity}},拒签原因:{{item.reason}}
          </div>
        </template>
      </div>
    </div>
    <slot></slot>
  </el-tooltip>
</template>
<script>
export default {
  name: "GoodsSignTip",
  props: ["value", "placement"],
  computed: {
    goods () {
      return this.value || {};
    },
    quantity () {
      return this.goods.quantity;
    },
    signQuantity () {
      return this.goods.signQuantity;
    },
    exceptionQuantity () {
      return this.goods.exceptionQuantity;
    },
    lackQuantity () {
      return this.goods.lackQuantity;
    },
    damageQuantity () {
      return this.goods.damageQuantity;
    },
    otherQuantity () {
      return this.goods.otherQuantity;
    },
    loseQuantity () {
      return this.goods.loseQuantity;
    },
    exceptionDesc () {
      return this.goods.exceptionDesc;
    },
    rejects () {
      return this.goods?.rejects || [];
    },
    receiptRejects () {
      return this.goods?.receiptRejects || [];
    }
  }
};
</script>
<style scoped>
.contentSty {
  /* overflow-y: auto; */
  overflow: auto;
}
</style>